<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 400px;
            border: 10px solid #333;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 40px;
            display: flex;
            line-height: 40px;
        }

        .header div {
            flex: 1;
            background-color: hotpink;
            text-align: center;
            font-size: 36px;
            color: white;
        }

        .header .active {
            background-color: orange;
        }

        .content {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="active">热卖</div>
            <div>精品</div>
            <div>推荐</div>
        </div>
        <div class="body">
            <div class="content" style="display: block;">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>

    </div>

    
    <script>
        // 将每一个选项卡功能的实现看着是一个对象，所以需要有一个构造函数

        function Tab(headers,contents) {
            // 在new对象时将传递过来参数使用对象自己的属性保存起来
            this.headers = headers;
            this.contents = contents;
            // 因为构造函数中的代码是会被顺序执行
            this.show();
        }
        // 构造函数的原型上添加方法
        Tab.prototype.show = function () {
            this
            for (var i = 0; i <this.headers.length; i++) {
                this.headers[i].index = i;
                let that = this;
                this.headers[i].onclick = function () {
                    // 在点击事件中this 表示的是当前事件源的dom对象
                    for (var j = 0; j < that.headers.length; j++) {
                        that.headers[j].className = '';
                    }
                    this.className = 'active';

                    for (var j = 0; j < that.headers.length; j++) {
                        that.contents[j].style.display = 'none';
                    }
                    that.contents[this.index].style.display = 'block'
                }
            }

        }


        let headerDoms = document.querySelectorAll('.header>div');
        let contentDoms = document.querySelectorAll('.body>.content');
        let t = new Tab(headerDoms,contentDoms);
        // t.show();
    </script>
</body>

</html>